import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{fontSize: 40}}>Home Screen</Text>
      <Button onPress={() => navigation.navigate('DetailsStackNav')} title="跳转到详情页" />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{fontSize: 40}}>Details Screen</Text>
      <Button onPress={() => navigation.navigate('HomeStackNav')} title="回首页" />
    </View>
  );
}

const Stack = createStackNavigator();

function StackDemo() {
  return (
    <Stack.Navigator initialRouteName="HomeStackNav" headerMode={'none'} >
      <Stack.Screen name="HomeStackNav" component={HomeScreen} />
      <Stack.Screen name="DetailsStackNav" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

export default StackDemo;